<template>
    <div>
        <h2>显示price</h2>
        <table>
            <tbody>
                <tr>
                <td>
                     酒店名称：<input type="text" v-model="start.name"> 
                    <button @click="getshow">查询</button>

                </td>
            </tr>
            </tbody>
        </table>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg bg-primary">
                    <td>房间类型</td>
                    <td>设置价格</td>
                    <td>酒店名称</td>
                    <td>房间数量</td>
                    <td>早餐数量</td>
                    <td>入住人数数量</td>
                    <td>开始时间</td>
                    <td>结束时间</td>
                    <td>房间图片</td>
                    <td>房价计划状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in showprice">
                    <td>{{ item.roomType }}</td>
                    <td>{{ item.money}}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.houseNumber }}</td>
                    <td>{{ item.zaoNumber }}</td>
                    <td>{{ item.people }}</td>
                    <td>{{ item.benginTime.substring(0,10)}}</td>
                    <td>{{ item.jieShuTime.substring(0,10) }}</td>
                    <td><img :src="item.pic" style="display: '';max-width: 100px;max-height: 100px;"></td>
                    <td>{{ item.state }}</td>
                    <td>
                         <a @click="Delete(item.id)" style="color: red;">删除</a>
                        <a @click="Update(item.id)" style="color: blue;">修改</a>
                        <a @click="Update(item.id)" style="color: pink;">启用</a>
                        <a @click="Update(item.id)" style="color: blueviolet;">禁用</a> 
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td>
                    <button @click="show('a')">上一页</button>
                    <button @click="show('b')">下一页</button>
                    <button @click="show('c')">首页</button>
                    <button @click="show('d')">尾页</button>
                    共{{  count }}条,当前第{{ start.index }}/{{ start.size }},共有{{ sum }}页

                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import "bootstrap/dist/css/bootstrap.min.css";

const router=useRouter();
const showprice=ref([])
const form:any=reactive({
    start:{
        name:"",
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})
const {start,list,count,sum}=toRefs(form);
const getshow=()=>{
    let obj={
        name:start.value.name,
        index:start.value.index,
        size:start.value.size
    }
    console.log(obj.index);

    axios.get("https://localhost:7015/api/Price/Show?name="+obj.name+"&index="+obj.index+"&size="+obj.size).then(res=>{
        console.log(res);
        showprice.value=res.data.data;
        count.value=res.data.count;
        sum.value=res.data.sum;
      
    })

}

const show :any=(e:any)=>{
    switch(e){
        case 'a':
            if(start.value.index==1){
                alert("已经是第一页");
                return;
            }
            start.value.index-=1
            break;
        case 'b':
            if(start.value.index==sum.value){
                alert("已经是最后一页");
                return;
            }
            start.value.index+=1;
            break;
        case 'c':
            if(start.value.index==1)
            {
                alert("已经是首页了");
                break;
            }
            start.value.index=1;
            break;
        case 'd':
            if(start.value.index==sum.value){
                alert("是最后一页了");
                break;
            }
            start.value.index=sum.value;
            break;
    
    }
    getshow();
}
//删除
const Delete=(id:number)=>{
    axios.delete("https://localhost:7015/api/Price/DelShop?id="+id).then(res=>{
        if(confirm("确认删除吗")){
            if(res.data>0){
                alert("删除成功");
                getshow();
            }else
            {
                alert("删除失败")
            }
        }

    })
}

//修改
const Update=(id:number)=>{
    router.push("/upprice?id="+id);
}





onMounted(()=>{
    getshow();
})

</script>

<style scoped>

</style>